<template>
  <BaseMainSlot>
    <template v-slot:content>
      <div class="farm-main">
        <div class="tr-sid">
          <div class="sid-head">选择鱼塘</div>
          <div class="sid-tree">
            <treeSide @treeselectvalue="treeselectvalue" />
          </div>
        </div>
        <div class="cameraview-box">
          <div v-loading="loading && startUp === 'true'" element-loading-text="预热中，请耐心等待哦亲！" class="cameraview-box-one">
            <iframe v-if="showFace === 'play'" :src="nowcameraurl" style="width: 100%; height: 100%"></iframe>
            <div v-if="showFace === 'notCameraList'"
              style=" width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; ">
              <h1>未获取到该摄像头数据</h1>
            </div>
            <div v-if="showFace === 'downFlow'"
              style=" width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; ">
              <h1>正在连接...</h1>
            </div>
            <div v-if="showFace === 'transCamera'"></div>
            <div v-if="showFace === 'notCameraData'"
              style=" width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; ">
              <h1>未取得该摄像头数据</h1>
            </div>
          </div>
          <zhcameralist :cameralistparam="paramslist" @nowcameraurl="getcamerurl" />
          <div style="display: flex; height: 52%; width: 100%">
            <div style="width: 100%; height: 90%">
              <div class="cameraview-box-two-line">
                <div class="cameraview-box-two-line-title">设备控制</div>
              </div>
              <!-- <div v-if="controshebeilist.length > 0 && judgePermission(2, 'remoteControl')" class="cameraview-box-two"> -->
              <div v-if="controshebeilist.length > 0" class="cameraview-box-two" v-loading="loadingStu"
                element-loading-text="等待数据刷新" element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.5)">
                <div v-for="item in controshebeilist" :key="item.dataItemId" class="zh-contro">
                  <div class="contro-one">
                    <div class="icon"></div>
                    <el-tooltip :content="item.dataItemName" placement="top" effect="light">
                      <div class="contro-one-title">{{ item.dataItemName }}</div>
                    </el-tooltip>
                    <div class="contro-one-stau" :style="{ color: getequipmentStyle(item.nowstau) }">{{ item.nowstau }}
                    </div>
                  </div>
                  <div class="contro-two">
                    <div v-for="( kaiguanitem, kaiguanindex ) in item.enumListTypetwo" :key="kaiguanindex"
                      class="contro-two-zcon"
                      :class="item.dataCollectNew && item.dataCollectNew.firstValue == kaiguanindex ? 'contro-two-zcon-active' : ''"
                      @click="controlequpmentone(item.iotDataItemId, kaiguanitem.value, kaiguanitem.name)">{{
                        kaiguanitem.name }}</div>
                  </div>
                </div>
              </div>
              <div v-else class="cameraview-box-two cameraview-box-two-ds">
                <h2>当前无可控设备</h2>
              </div>
            </div>
          </div>
        </div>

        <div class="cameralist-box">
          <div class="cameraview-box-two-line">
            <div class="cameraview-box-two-line-title">策略控制</div>
          </div>
          <div class="cameraview-box-two">
            <div class="celu-but" @click="clickconfigcelue()">配置策略</div>
            <div class="cameraview-box-main">
              <div v-if="tableDeviData.length > 0" class="dig-view">
                <div class="dig-view-item" v-for="(newzhitem, newzhindex) in tableDeviData" :key="'tabone' + newzhindex">
                  <div class="dig-view-item-title">
                    <el-tooltip :content="newzhitem.equipment.equipmentName" placement="top" effect="light">
                      <div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                        {{ newzhitem.equipment.equipmentName }}</div>
                    </el-tooltip>
                  </div>
                  <div class="dig-view-item-name">
                    <div v-if="newzhitem.priority" class="dig-view-item-name-line2" :style="{
                      backgroundColor: colorList[newzhitem.priority],
                    }">{{ priorityList[newzhitem.priority - 1].name }}</div>
                    <div class="dig-view-item-name-line1">策略 {{ newzhindex + 1 }}</div>
                  </div>
                  <hr />
                  <div>条件配置</div>
                  <div v-for="(newzhitemone, newzhindexone) in newzhitem.judgelist" :key="'tabtwo' + newzhindexone">
                    关联关系{{ newzhindexone + 1 }}: 数据项：{{
                      changedataitem(newzhitemone.dataItemId)
                    }}
                    <br />判断条件：
                    <span v-if="newzhitemone.signBit === 'equals'">{{ '=' }}</span>
                    <span v-else-if="newzhitemone.signBit === 'gte'">{{ '>=' }}</span>
                    <span v-else-if="newzhitemone.signBit === 'gt'">{{ '>' }}</span>
                    <span v-else-if="newzhitemone.signBit === 'lte'">{{ '<=' }}</span>
                        <span v-else>{{ '<' }}</span>值:{{ newzhitemone.value }}
                  </div>
                  <hr />
                  <div>控制配置</div>
                  <div v-for="(newzhitemtwo, newzhindextwo) in newzhitem.controllist" :key="newzhindextwo">
                    关联关系{{ newzhindextwo + 1 }}： 数据项：{{
                      changedataitem(newzhitemtwo.dataItemId)
                    }}
                    <br />
                    控制时间：{{ newzhitemtwo.controlMinute }} 值:{{
                      newzhitemtwo.value
                    }}
                  </div>
                </div>
              </div>
              <!-- </div> -->
              <div v-else class="dig-view cameraview-box-two-ds">
                <h2>当前无策略</h2>
              </div>
            </div>
          </div>
        </div>

        <el-dialog title="确认提示" :visible.sync="showConfirmDialog" width="25%" class="yanzheng">
          <div style="height:36px;display:flex;justify-content:center;font-size:20px"><span>确认要执行该操作吗?</span></div>
          <span slot="footer" class="dialog-footer">
            <el-button type="success" @click="showConfirmDialog = false">取消</el-button>
            <el-button type="primary" @click="controlequpment()">确认执行</el-button>
          </span>
        </el-dialog>
        <!-- 开关验证码弹框 -->
        <el-dialog title="输入验证码" :visible.sync="yanzhengcodeview" width="30% !important" class="yanzheng">
          <div class="dig-yanzhencode">
            <div>
              <img :src="nowcodeimg" />
              <div class="changecodeimg" @click="openyanzhencode()">看不清换一张</div>
            </div>
            <el-input v-model="nowcodetwo" placeholder="请输入验证码" />
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="success" @click="yanzhengcodeview = false">取消</el-button>
            <el-button type="primary" @click="yanzhengcode()">确认执行</el-button>
          </span>
        </el-dialog>

        <!-- 策略配置主弹框 -->
        <el-dialog title="策略配置" :visible.sync="showpeizhicelue" class="cl_dialog" @close="dataItemList = []">
          <div class="dig-message">
            <div class="dig-line">
              <div class="dig-line-item">
                设备选择：
                <el-select filterable clearable v-model="strategyAllMessage.equipmentId" @change="getdataitemlist">
                  <template v-for="item in vrtuallist">
                    <el-option :key="item.equipmentId" :value="item.equipmentId" :label="item.equipmentName" />
                  </template>
                </el-select>
              </div>
            </div>

            <div class="dig-view">
              <div class="dig-view-title">条件配置</div>
              <div class="back">
                <div class="addback" @click="addconditconfig()">
                  <i class="el-icon-plus"></i>
                </div>
                <div class="delback" @click="delconditconfig()">
                  <i class="el-icon-minus"></i>
                </div>
              </div>
              <div v-for="(itemone, indexone) in strategyAllMessage.conditionConfig" :key="indexone"
                class="dig-view-main">
                <div class="dig-view-main-item">
                  数据项
                  <el-select filterable clearable v-model="strategyAllMessage.conditionConfig[indexone].dataItemId
                    " clearable class="input-yem-sty" @change="dataTypeChange($event)">
                    <template v-for="(newitem, newindex) in dataItemList">
                      <el-option v-if="newitem.dataType.mainingControlType == 'COLLECTION'" :key="newindex"
                        :label="newitem.dataItemName" :value="newitem.iotDataItemId" />
                    </template>
                  </el-select>
                </div>
                <div class="dig-view-main-item">
                  判断条件
                  <el-select filterable clearable v-model="strategyAllMessage.conditionConfig[indexone].signBit
                    " class="input-yem-sty">
                    <el-option v-for="(conditem, condindex) in zhconditionlist" :key="condindex" :label="conditem.name"
                      :value="condindex" />
                  </el-select>
                </div>
                <div class="dig-view-main-item">
                  判断值
                  <el-input v-model="strategyAllMessage.conditionConfig[indexone].value"
                    @change="strategyAllMessage.conditionConfig[indexone].value <= 0 ? strategyAllMessage.conditionConfig[indexone].value = '' : ''"
                    type="number" class="input-yem-sty">
                  </el-input>
                  {{ unitObj[strategyAllMessage.conditionConfig[indexone].dataItemId + ''] }}
                </div>
              </div>
            </div>

            <div class="dig-view">
              <div class="dig-view-title">控制策略</div>
              <div class="back">
                <div class="addback" @click="addcontrolconfig()">
                  <i class="el-icon-plus"></i>
                </div>
                <div class="delback" @click="delcontrolconfig()">
                  <i class="el-icon-minus"></i>
                </div>
              </div>
              <div v-for="(itemtwo, indextwo) in strategyAllMessage.controlConfig" :key="indextwo" class="dig-view-main">
                <div class="dig-view-main-item">
                  数据项
                  <el-select filterable clearable v-model="strategyAllMessage.controlConfig[indextwo].dataItemId
                    " clearable class="input-yem-sty" @change="setcontrolvaluelist($event, indextwo)">
                    <template v-for="(newitem, newindex) in dataItemList">
                      <el-option v-if="newitem.dataType.mainingControlType !== 'COLLECTION'" :key="newindex + 'dataItem'"
                        :label="newitem.dataItemName" :value="newitem.iotDataItemId" />
                    </template>
                  </el-select>
                </div>
                <div class="dig-view-main-item">
                  控制时长
                  <!--  (分) -->
                  <el-input v-model="strategyAllMessage.controlConfig[indextwo].controlMinute
                    " type="number"
                    @change="strategyAllMessage.controlConfig[indextwo].controlMinute <= 0 ? strategyAllMessage.controlConfig[indextwo].controlMinute = '' : ''"
                    class="input-yem-sty">
                    <template slot="append">分</template>
                  </el-input>
                </div>
                <div class="dig-view-main-item">
                  值
                  <el-select filterable clearable v-model="strategyAllMessage.controlConfig[indextwo].value" placeholder="请先选择数据项"
                    class="input-yem-sty">
                    <el-option v-for="newvalueitem in itemtwo.valueselectlist" :key="newvalueitem.id"
                      :label="newvalueitem.name" :value="newvalueitem.id" />
                  </el-select>
                </div>
              </div>
            </div>

            <div class="dig-line">
              <div class="tempbut green">取消</div>
              <div class="tempbut tempcolor" @click="clicksaveconfig">保存到预览</div>
            </div>

            <div class="celuconfigshowview">
              <div>策略配置预览表</div>
              <el-button v-if="isshowpriorityinput === false" class="showviewbut" type="warning" plain
                @click="clickpriorityconfig()">配置优先级</el-button>
              <el-button v-else class="showviewbut" type="warning" plain @click="savepriorityconfig()">保存优先级</el-button>
            </div>
            <div class="dig-views">
              <div style="padding: 10px;margin: 5px; box-sizing: border-box;" v-for="(newzhitem, newzhindex) in tableData"
                :key="'tabone' + newzhindex">
                <!-- <div>状态：开启</div> -->
                <div class="dig-view-item-name">
                  <div class="dig-view-item-name-line1">策略{{ newzhindex + 1 }}</div>
                  <div v-if="newzhitem.priority" class="dig-view-item-name-line2"
                    :style="{ backgroundColor: colorList[newzhitem.priority - 1] }">
                    {{ priorityList[newzhitem.priority - 1].name }}
                  </div>
                  <div v-if="isshowpriorityinput" class="dig-view-item-name-line3">
                    <el-select filterable clearable v-model="newzhitem.priority" placeholder="暂无优先级">
                      <el-option v-for="(proitem, proindex) in priorityList" :key="proindex" :value="proitem.value"
                        :label="proitem.name" />
                    </el-select>
                  </div>
                </div>

                <div>
                  <div style="border-top: 1px solid #ebebeb;padding: 5px;color: #67c23a;">条件配置</div>
                  <div v-for="(newzhitemone, newzhindexone) in newzhitem.judgelist" :key="'tabtwo' + newzhindexone">
                    <div style="display: flex;align-items: center ">
                      关联关系{{ newzhindexone + 1 }}: 数据项：{{
                        changedataitem(newzhitemone.dataItemId)
                      }}

                      <div v-if="!ishownewzhitem[newzhindex]">
                        <span v-if="newzhitemone.signBit === 'equals'">{{ '=' }}</span>
                        <span v-else-if="newzhitemone.signBit === 'gte'">{{ '>=' }}</span>
                        <span v-else-if="newzhitemone.signBit === 'gt'">{{ '>' }}</span>
                        <span v-else-if="newzhitemone.signBit === 'lte'">{{ '<=' }}</span>
                            <span v-else>{{ '<' }}</span>
                      </div>
                      <el-select filterable clearable v-else size="mini" style="width: 100px;" v-model="newzhitemone.signBit"
                        placeholder="请选择活动区域">
                        <el-option v-for="item, index in zhconditionlist" :key="index" :label="item.name"
                          :value="item.value"></el-option>
                      </el-select>
                      <span v-if="!ishownewzhitem[newzhindex]"> {{ newzhitemone.value }}</span>
                      <div v-else>
                        值：<el-input style="width: 100px;" size="mini" v-model="newzhitemone.value"></el-input>
                      </div>
                    </div>
                  </div>
                </div>
                <div style="border-top: 1px solid #ebebeb;padding: 5px; color: #409eff;">控制配置</div>
                <div v-for="(newzhitemtwo, newzhindextwo) in newzhitem.controllist" :key="newzhindextwo">
                  <div style="display: flex;align-items: center ">
                    关联关系{{ newzhindextwo + 1 }}： 数据项：{{
                      changedataitem(newzhitemtwo.dataItemId)
                    }}
                    控制时间：
                    <span v-if="!ishownewzhitem[newzhindex]">{{ newzhitemtwo.controlMinute }}</span>
                    <el-input v-else style="width: 100px;" size="mini" v-model="newzhitemtwo.controlMinute"></el-input>
                    分钟 控制状态:
                    <span v-if="!ishownewzhitem[newzhindex]">{{ newzhitemtwo.value ? '开' : '关' }}</span>
                    <el-select filterable clearable v-else size="mini" style="width: 100px;" v-model="newzhitemtwo.value"
                      placeholder="请选择活动区域">
                      <el-option label="关" :value="0"></el-option>
                      <el-option label="开" :value="1"></el-option>
                    </el-select>
                  </div>
                  <!-- <span style="margin-left: 20px;color: #409eff;"
                    @click="($event) => { editcontrollist(newzhindex, newzhindextwo) }">编辑</span>
                  <span style="margin-left: 20px;color: #e2a012;">保存</span> -->
                </div>
                <div style="display: flex; align-item: center">
                  <div style="color: #ffffff;" class="tempbut tempcolor" @click="delconfigconditiondata(newzhitem)">删 除
                  </div>
                  <div style="color: #ffffff;" v-if="!ishownewzhitem[newzhindex]" class="tempbut tempcolor"
                    @click="editcontrollist(newzhindex, true)">编 辑
                  </div>
                  <div style="color: #ffffff;" v-if="ishownewzhitem[newzhindex]" class="tempbut tempcolor"
                    @click="editcontrollist(newzhindex, false)">取 消
                  </div>
                  <div style="color: #ffffff;" v-if="ishownewzhitem[newzhindex]" class="tempbut tempcolor"
                    @click="save(newzhindex)">保 存
                  </div>
                  <div style="color: #ffffff;" v-if="!newzhitem.status" class="tempbut tempcolor"
                    @click="editconfigconditiondata(newzhitem)">启用策略
                  </div>
                  <div style="color: #ffffff;" v-if="newzhitem.status" class="tempbut green"
                    @click="editconfigconditiondata(newzhitem)">停用策略
                  </div>
                </div>
              </div>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="success" @click="showpeizhicelue = false">取消</el-button>
            <el-button type="primary" @click="openyanzhencode(isshowpriorityinput)">执行策略</el-button>
          </span>
        </el-dialog>
      </div>
    </template>
  </BaseMainSlot>
</template>
<script>
// import treeSide from "./component/trelist.vue";
import treeSide from "@/components/selectbutton/trelist.vue";
import zhcameralist from "./component/cameralist.vue";
import DeviceRemoteControlApi from "@/api/iot-monitoring/device-remote-control";
import DeviceManagementApi from "@/api/basic-info-manage/device-management";
import DataItemManageApi from "@/api/basic-info-manage/data-item-manage";
import BaseMainSlot from "@/components/BaseMainSlot/baseone.vue";
import { mapGetters } from "vuex";
import axios from "axios";
export default {
  name: "DeviceRemoteControl",
  components: { treeSide, BaseMainSlot, zhcameralist },
  data () {
    return {
      ishownewzhitem: [],
      // 加载动效
      startUp: "false",
      loading: true,
      // ---优先级相关---
      // 是否展示等级配置输入框
      searchEquipmentId: -1,
      isshowpriorityinput: false,
      priorityList: [
        { name: "一级", value: 1 },
        { name: "二级", value: 2 },
        { name: "三级", value: 3 },
        { name: "四级", value: 4 },
        { name: "五级", value: 5 },
        { name: "六级", value: 6 },
        { name: "七级", value: 7 },
        { name: "八级", value: 8 }
      ],
      // 等级颜色列表
      colorList: [
        "rgba(165, 214, 63, 1)",
        "rgba(67, 207, 124, 1)",
        "rgba(0, 186, 173, 1)",
        "rgba(254, 170, 57, 1)",
        "rgba(42, 130, 228, 1)",
        "rgba(121, 72, 234, 1)",
        "rgba(172, 51, 193, 1)",
        "rgba(254, 83, 57, 1)",
      ],
      // -----
      // 验证码弹框
      yanzhengcodeview: false,
      // 验证码
      nowcode: "",
      // 验证码图片
      nowcodeimg: "",
      nowcodetwo: "",
      // 临时存储的设备开关信息
      nowcontrolmessage: {
        id: "",
        key: "",
        index: ""
      },
      tableData: [],
      tableDeviData: [],
      // 是否展示配置策略对话框
      showpeizhicelue: false,
      // 策略配置信息
      strategyAllMessage: {
        equipmentId: "", // 虚拟设备id
        strategyuptime: 5, // 上报时间
        // 条件配置相关
        conditionConfig: [
          { dataItemId: "", signBit: "", value: "", judgeSign: "begin", }
        ],
        // 控制策略相关
        controlConfig: [
          {
            dataItemId: "",
            controlMinute: "",
            value: "",
            controlSign: "begin",
            valueselectlist: [{ name: "暂无数据", id: 0 }]
          }
        ]
      },
      // 条件判断list equals = gte  >= gt > lte <= lt<
      zhconditionlist: [
        {
          name: "=",
          value: "equals"
        },
        {
          name: ">=",
          value: "gte"
        },
        {
          name: ">",
          value: "gt"
        },
        {
          name: "<=",
          value: "lte"
        },
        {
          name: "<",
          value: "lt"
        }
      ],
      // 控制策略的值list
      valueselectlist: [
        {
          id: 0,
          name: "禁用"
        },
        {
          id: 1,
          name: "启用"
        }
      ],
      // 可选择数据项
      dataItemList: [],
      unitObj: {},
      AllDataItemList: [],
      // 可选择虚拟设备
      vrtuallist: [],
      // 获取可控制设备
      controshebeilist: [],
      paramslist: {},
      cameralist: [],
      // 当前选中鱼塘
      currentFishPond: "",
      // 当前视频播放地址
      nowcameraurl: "",
      // 是否展示视频窗口
      showFace: "transCamera",
      showConfirmDialog: false,
      loadingStu: false
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission"
    })
  },
  watch: {},
  mounted () {
  },
  created () {
    this.getAllDataItemList();
    this.getdataitemlist(null);
  },
  methods: {
    editcontrollist (tableIndex, status) {
      // this.ishownewzhitem[tableIndex] = true  
      this.getdataitemlist(this.strategyAllMessage.equipmentId)
      this.ishownewzhitem = []
      this.$set(this.ishownewzhitem, tableIndex, status)
    },
    save (tableIndex) {
      DeviceRemoteControlApi.edit(this.tableData[tableIndex]).then(res => {
        console.log(res)
        this.ishownewzhitem = []
      });
    },
    handleClose () {
      this.dialogVisible = false
    },
    // 点击树状触发方法
    treeselectvalue (e) {
      this.currentFishPond = e;
      this.paramslist = { fishPondId: e };
      this.getvrtuallist(e);
      this.getcontroshebeilist(e);
      this.gethassavetables();
    },
    getAllDataItemList () {
      // 获取数据项选择项
      DataItemManageApi.queryByCondition({
        // mainingControlTypeList: ["CONTROL", "ACQUISITIONCONTROL"] 
      }).then(res => {
        // 过滤人为添加的数据项
        if (res.data) {
          res.data.forEach(item => {
            if (item.iotDataItemId) this.AllDataItemList.push(item);
          });
        } else {
          // res.data = [];
          this.AllDataItemList = [];
        }
      });
    },
    // 设备下拉选择,查询可选数据项
    getdataitemlist (e) {
      // 获取数据项选择项
      DataItemManageApi.queryByCondition({
        // mainingControlTypeList: ["CONTROL", "ACQUISITIONCONTROL"],
        equipmentId: e
      }).then(res => {
        this.$set(this.strategyAllMessage, 'conditionConfig', [{ dataItemId: "", signBit: "", value: "", judgeSign: "begin" }])
        this.$set(this.strategyAllMessage, 'controlConfig', [{
          dataItemId: "",
          controlMinute: "",
          value: "",
          controlSign: "begin",
          valueselectlist: [{ name: "暂无数据", id: 0 }]
        }])
        // 过滤人为添加的数据项
        if (res.data) {
          this.dataItemList = []
          this.unitObj = {}
          res.data.forEach(item => {
            if (item.iotDataItemId) {
              this.dataItemList.push(item)
              this.unitObj[item.iotDataItemId] = item.dataType.unit ? item.dataType.unit : ''
              console.log(this.unitObj)
            };
          });
        } else {
          // res.data = [];
          this.dataItemList = [];
        }
        this.gethassavetable(e);
      });
    },
    // 获取鱼塘关联设备 下拉选择
    getvrtuallist (e) {
      DeviceManagementApi.queryByCondition({ fishPondId: e }).then(res => {
        if (res.success === false) {
          this.$message.error("设备获取失败");
        }
        this.vrtuallist = res.data;
      });
    },
    // 点击配置优先级
    clickpriorityconfig () {
      this.isshowpriorityinput = true;
    },
    // 点击保存优先级
    savepriorityconfig () {
      // 是否都有优先级
      let ishaspriority = true;
      // 是否 没有相同的优先级
      let isnosamepriority = true;
      let listone = [];
      this.tableData.forEach(itemone => {
        if (itemone.priority) {
          let mesone = {
            priority: itemone.priority,
            equipmentStrategyId: itemone.equipmentStrategyId,
            organizationNo: sessionStorage.organizationNo
          };
          // console.log(itemone.equipmentStrategyId)
          let hasmesstau = false;
          listone.forEach(itemtwo => {
            if (itemtwo.priority === itemone.priority) {
              hasmesstau = true;
            }
          });
          if (hasmesstau === false) {
            listone.push(mesone);
          } else {
            isnosamepriority = false;
          }
        } else {
          ishaspriority = false;
        }
      });
      if (ishaspriority && isnosamepriority) {
        DeviceRemoteControlApi.editBatch(listone).then(resone => {
          if (resone.success) {
            this.gethassavetable();
            this.$message.success("保存优先级成功");
            this.isshowpriorityinput = false;
          } else {
            this.gethassavetable();
            this.$message.error("配置优先级失败");
          }
        });
      } else if (ishaspriority === false) {
        this.$message.error("请配置所有优先级！");
      } else if (isnosamepriority === false) {
        this.$message.error("请勿配置相同优先级！");
      }
    },
    // 点击确认按钮
    yanzhengcode () {
      if (this.nowcodetwo === this.nowcode) {
        this.yanzhengcodeview = false;
        if (this.showpeizhicelue) {
          this.zhixingtask();
        } else {
          this.controlequpment();
        }
      } else {
        this.$message.error("请输入正确的验证码");
      }
    },
    // 获取已存储表格
    gethassavetable (e) {
      let par = {
        equipmentId: this.strategyAllMessage.equipmentId || e
        // "fishPondId": this.fishPondId,
      };
      if (par.equipmentId?.length === false) {
        return;
      }
      DeviceRemoteControlApi.queryByCondition(par).then(res => {
        if (res.data) {
          this.tableData = res.data;
        } else {
          this.tableData = [];
        }
      });
    },
    // 获取已存储表格
    async gethassavetables (e) {
      // console.log(this.currentFishPond);
      this.tableDeviData = [];
      let par = {
        fishPondId: this.currentFishPond
      };
      DeviceRemoteControlApi.queryByCondition(par).then(res => {
        if (res.data !== undefined) {
          this.tableDeviData = res.data;
          console.log(res.data);
        } else {
          this.tableDeviData = [];
        }
      });
      // });
      // console.log(this.tableDeviData)
    },
    // 点击保存策略
    clicksaveconfig () {
      let params = {
        equipmentId: this.strategyAllMessage.equipmentId,
        controllist: this.strategyAllMessage.controlConfig,
        judgelist: JSON.parse(
          JSON.stringify(this.strategyAllMessage.conditionConfig)
        ),
        reportTime: this.strategyAllMessage.strategyuptime,
        status: false,
        fishPondId: this.currentFishPond
      };

      if (this.strategyAllMessage.equipmentId === "") {
        this.$message.warning("请选择虚拟设备！");
      }
      if (params.controllist === [] || params.judgelist === []) {
        this.$message.warning("数据至少配置一条");
        return;
      }
      params.judgelist.forEach((yuitem, yuindex) => {
        params.judgelist[yuindex].signBit = JSON.parse(
          JSON.stringify(this.zhconditionlist[yuitem.signBit].value)
        );
      });
      params.controllist = this.strategyAllMessage.controlConfig.map(
        conitem => {
          return {
            dataItemId: conitem.dataItemId,
            controlMinute: conitem.controlMinute,
            value: conitem.value,
            controlSign: conitem.controlSign
          };
        }
      );
      console.log(params)
      DeviceRemoteControlApi.add(params).then(res => {
        if (res.success) {
          this.$message.success("保存到预览成功");
          this.gethassavetable();
          this.gethassavetables();
        } else {
          this.$message.warning("保存到预览失败");
        }
      });
    },
    // 点击删除策略
    async delconfigconditiondata (e) {
      if (e.status && e.rtuRunStrategyNewId) {
        const rtu = await DeviceRemoteControlApi.clearAppStrategy({
          rtuRunStrategyNewId: e.rtuRunStrategyNewId,
          tableName: "Fish"
        });

        if (rtu.errCode !== undefined) {
          this.$message.warning("操作失败");
          return;
        }
      }
      await DeviceRemoteControlApi.delListById({
        idList: [e.equipmentStrategyId]
      }).then(res => {
        if (res.success) {
          this.$message.success("删除成功");
          this.gethassavetable();
          this.gethassavetables();
        } else {
          this.$message.warning("删除失败");
        }
      });
    },
    // 修改策略--启用或者停用策略
    editconfigconditiondata (e) {
      let param = {
        equipmentStrategyId: e.equipmentStrategyId,
        status: !e.status
      };
      DeviceRemoteControlApi.edit(param).then(res => {
        if (res.success) {
          if (e.status === false) {
            this.$message.success("启用策略成功！");
          } else if (e.status === true) {
            this.$message.success("停用策略成功！");
            DeviceRemoteControlApi.clearAppStrategy({
              rtuRunStrategyNewId: e.rtuRunStrategyNewId,
              tableName: "Fish"
            });
          }
          this.gethassavetable();
        } else {
          this.$message.warning("修改失败");
        }
      });
    },
    // --- ****点击执行策略方法**** ---
    async zhixingtask () {
      let list = this.tableData;
      let newlist = {
        reportTime: this.strategyAllMessage.reportTime,
        paramList: []
      };
      let isreq = true;
      if (list.length > 0) {
        list.forEach((itemtwo, indextwo) => {
          if (itemtwo.status) {
            let judgelistone = [];
            itemtwo.judgelist.forEach((itemthree, indexthree) => {
              let judgelisttwo = {
                dataItemId: itemthree.dataItemId,
                judgeSign: itemthree.judgeSign,
                signBit: itemthree.signBit,
                value: itemthree.value
              };
              judgelistone.push(judgelisttwo);
            });
            let controllistone = [];
            itemtwo.controllist.forEach((itemthree, indexthree) => {
              let controllisttwo = {
                dataItemId: itemthree.dataItemId,
                controlSign: itemthree.controlSign,
                controlMinute: itemthree.controlMinute,
                value: itemthree.value
              };
              controllistone.push(controllisttwo);
            });

            // 没有优先级调用接口失败
            if (itemtwo.priority) {
              let newobjpus = {
                priority: itemtwo.priority,
                controllist: controllistone,
                judgelist: judgelistone
              };
              newlist.paramList.push(newobjpus);
            } else {
              isreq = false;
            }
          }
        });
        if (isreq === false) {
          this.$message.error("请先配置策略优先级");
          return;
        }
        this.restartRUT();
        DeviceRemoteControlApi.rtuRunStrategy(newlist).then(async res => {
          if (res.data) {
            let newmessageone = res.data;
            let pusmessage = {
              rtuRunStrategyNewId: newmessageone.rtuRunStrategyNewId,
              tableName: newmessageone.tableName,
              enable: true
              // deviceNo: this.strategyAllMessage.deviceNo
            };
            this.editlastmetone(pusmessage);
          } else {
            this.$message.error("请配置的策略有未启用！");
          }
        });
      }
    },
    // 修改状态
    editlastmetone (e) {
      let param = e;
      this.tableData.forEach(item => {
        DeviceRemoteControlApi.edit({
          rtuRunStrategyNewId: e.rtuRunStrategyNewId,
          equipmentStrategyId: item.equipmentStrategyId
        }).then(res => {
          if (res.success) {
            this.$message.success("执行策略成功！");
            this.gethassavetable();
          } else {
            this.$message.warning("修改失败");
          }
        });
      });
    },
    // 点击配置策略
    clickconfigcelue () {
      this.showpeizhicelue = true;
      this.strategyAllMessage = {
        equipmentId: "", // 虚拟设备id
        strategyuptime: 5, // 上报时间
        // 条件配置相关
        conditionConfig: [
          { dataItemId: "", signBit: "", value: "", judgeSign: "begin" }
        ],
        // 控制策略相关
        controlConfig: [
          { dataItemId: "", controlMinute: "", value: "", controlSign: "begin" }
        ]
      };
      this.tableData = [];
      // this.dataItemList = [];
    },
    // 点击策略控制的某个数据项
    setcontrolvaluelist (e, i) {
      let listone = this.dataItemList;
      listone.forEach(itemone => {
        if (itemone.iotDataItemId === e) {
          // this.searchEquipmentId = itemone.equipmentId
          if (itemone.dataType.enumListType) {
            this.strategyAllMessage.controlConfig[
              i
            ].valueselectlist = this.handelthree(itemone.dataType.enumListType);
          }
        }
      });
    },
    dataTypeChange (e) {
      let listone = this.dataItemList;
      listone.forEach(itemone => {
        if (itemone.iotDataItemId === e) {
          this.searchEquipmentId = itemone.equipmentId
        }
      });
    },
    // 获取鱼塘下可控制设备
    getcontroshebeilist (e) {
      this.controshebeilist = [];
      DeviceRemoteControlApi.queryControlItemByFishPondId({ fishPondId: e }).then(res => {
        if (res.data) {
          res.data.forEach(item => {
            if (item.iotDataItemId) this.controshebeilist.push(item);
          });
          console.log(this.controshebeilist)
        }
        this.handel();
      });
    },
    // 处理开关字符串 -- 并且获取所有状态
    handel () {
      if (this.controshebeilist) {
        this.controshebeilist.forEach((item, index) => {
          if (item.dataType) {
            item["enumListTypetwo"] = this.handeltwo(
              item.dataType.enumListType,
              item.dataItemId
            );
          }
          if (item.dataCollectNew?.firstValue === "0.0") {
            this.$set(item, "nowstau", "已关闭");
          }
          if (item.dataCollectNew?.firstValue === "1.0") {
            this.$set(item, "nowstau", "已开启");
          }
          console.log(item.dataCollectNew)
        });
      }
    },
    handeltwo (str, dataItemId) {
      let controlslist = [];
      let arr = str.split(";");
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].length > 0) {
          let diy = arr[i].split(":");
          controlslist.push({
            name: diy[1],
            value: diy[0],
            dataItemId: dataItemId
          });
        }
      }
      return controlslist;
    },
    changedataitem (id) {
      let name = "";
      if (this.AllDataItemList.length > 0) {
        this.AllDataItemList.forEach(item => {
          if (item.iotDataItemId === id) {
            name = item.dataItemName;
          }
        });
      }
      return name;
    },
    // 存储数据并且弹出用户确认弹框
    controlequpmentone (id, key, name) {
      this.nowcontrolmessage = {
        id: id,
        key: key,
        name: name
      };
      this.showConfirmDialog = true;
      // this.controlequpment();
      // this.openyanzhencode();
    },
    //重启RTU
    restartRUT () {
      let RTUid = null
      this.vrtuallist.forEach(item => {
        if (item.equipmentId == this.strategyAllMessage.equipmentId) {
          RTUid = item.rtuId
        }
      })
      let url = 'http://fishery.ssagroup.cn:8080/iotApplication/rtuControl/reboot'
      console.log(axios)
      axios.post(url, { rtuId: RTUid }).then(res => {
        this.$message.success('RTU重启中，策略配置中...')
        console.log(res)
      })
    },
    // 打开验证码弹框-重新获取验证码
    openyanzhencode (falg) {
      if (falg || this.tableData.length == 0 || !this.tableData) {
        this.$message.error('请先创建策略并保存优先级！')
        return
      }
      this.nowcodetwo = "";
      this.yanzhengcodeview = true;
      // 获取随机的验证码和图片
      DeviceRemoteControlApi.getVerificationCode().then(codres => {
        let listone = codres.data;
        if (listone) {
          this.nowcode = listone.stringCode;
          this.nowcodeimg = "data:image/png;base64," + listone.pictureData;
        }
      });
    },
    // 控制机器开关状态-------不可轻易调用
    async controlequpment () {
      this.showConfirmDialog = false;
      const params = {
        dataItemId: this.nowcontrolmessage.id,
        operation: this.nowcontrolmessage.key
      };
      const res = await DeviceRemoteControlApi.remoteControl(params)
      // 点击开关刷新状态,加五秒延迟
      this.loadingStu = true;
      const _that = this;
      setTimeout(function () {
        if (res.success) {
          _that.$message.success("控制成功!");
        } else {
          _that.$message.error(res.message);
        }
        _that.loadingStu = false;
        _that.getcontroshebeilist(_that.currentFishPond);
      }, 5000);
    },
    handelthree (str) {
      let controlslist = [];
      let arr = str.split(";");
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].length > 0) {
          let diy = arr[i].split(":");
          controlslist.push({
            name: diy[1],
            id: diy[0]
          });
        }
      }
      return controlslist;
    },
    // 获取机器状态,返回不同颜色
    getequipmentStyle (nowstau) {
      if (nowstau === "已关闭") {
        return "#ff0000";
      }
      if (nowstau === "已开启") {
        return "#00ff33";
      }
    },
    // 获取相机地址
    getcamerurl (e) {
      if (e === "transCamera") {
        // 切换摄像头
        this.showFace = "transCamera";
        this.loading = false;
        return;
      } else if (e === "downFlow") {
        // 流量不足无法播放
        this.showFace = "downFlow";
        this.loading = false;
        return;
      } else if (e === "notCameraData") {
        // 未获取到该摄像头数据
        this.showFace = "notCameraData";
        this.loading = false;
        return;
      } else if (e === "notCameraList") {
        // 暂无摄像头
        this.showFace = "notCameraList";
        this.loading = false;
        return;
      }
      this.nowcameraurl = e;
      setTimeout(() => {
        // 正常播放
        this.showFace = "play";
      }, 200);
    },
    // 填充表格空白行
    addblankmet () {
      let havline = this.tableData.length % 6;
      if (this.tableData.length < 6) {
        if (havline < 6) {
          const remain = 6 - havline;
          for (let i = 0; i < remain; i++) {
            this.tableData.push({ indflag: i + this.tableData.length - 1 });
          }
        }
      }
    },
    // 增加一条条件配置信息
    addconditconfig () {
      let pusobj = {
        dataItemId: "",
        signBit: "",
        value: "",
        judgeSign: "and"
      };
      if (this.strategyAllMessage.conditionConfig.length === false) {
        pusobj.judgeSign = "begin";
      }
      this.strategyAllMessage.conditionConfig.push(pusobj);
    },
    // 减少一条条件配置信息
    delconditconfig () {
      this.strategyAllMessage.conditionConfig.pop();
    },
    // 增加一条控制策略信息
    addcontrolconfig () {
      let pusobj = {
        dataItemId: "",
        controlMinute: "",
        value: 0,
        judgeSign: "and",
        valueselectlist: []
      };
      if (this.strategyAllMessage.controlConfig.length === false) {
        pusobj.judgeSign = "begin";
      }
      this.strategyAllMessage.controlConfig.push(pusobj);
    },
    // 减少一条控制策略信息
    delcontrolconfig () {
      this.strategyAllMessage.controlConfig.pop();
    },
    // cancel(){

    // }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .common-layout {
  .zhcontent {
    height: calc(100% - 15px) !important;
    margin: 10px 0;
    overflow: hidden !important;
    position: relative;
  }
}

.tempbut {
  min-width: 40px;
  height: 30px;
  margin-right: 10px;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  cursor: pointer;
  color: rgb(206, 201, 201);
  border-radius: 5px;
}

.tempbut:hover {
  color: #feffff;
}

.green {
  background-image: linear-gradient(to bottom, #adec6e, #69d75b, #31c54d);
  border-color: #dce8e6;
}

.tempcolor {
  background-color: #0095b4;
}

.red {
  background-color: #ff0000;
}

.zhdigtwo {
  width: 100%;
  min-height: 400px;
}

.back {
  position: absolute;
  display: flex;
  top: 13px;
  right: 25px;
}

.addback {
  width: 30px;
  height: 30px;
  border: 2px solid #237FC3;
  border-radius: 3px;
  cursor: pointer;
  margin-left: 5px;

  i {
    width: 100%;
    height: 100%;
    line-height: 27px;
    font-weight: 600;
    text-align: center;
    color: #237FC3;
  }
}

.delback {
  width: 30px;
  height: 30px;
  border: 2px solid #237FC3;
  border-radius: 3px;
  // background-size: 30px;
  // background-repeat: no-repeat;
  // background-position: center;
  // background-image: url('~@/assets/commont/dell.png');
  cursor: pointer;
  margin-left: 5px;

  i {
    width: 100%;
    height: 100%;
    line-height: 26px;
    color: #237FC3;
    font-weight: 600;
    text-align: center;
  }
}

// 验证码
.dig-yanzhencode {
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  .changecodeimg {
    width: 80px;
    margin-top: 2px;
    cursor: pointer;
    margin-bottom: 6px;
    white-space: nowrap;
    font-size: 13px;
    color: #fff;
    border-bottom: #fff 1px solid;
  }

  .changecodeimg:hover {
    color: rgb(26, 170, 175);
    border-color: rgb(26, 170, 175);
  }
}

.dig-message {
  color: #959595;
  width: 100%;
  min-height: 400px;
  max-height: 600px;

  // overflow: auto;
  .dig-tip {
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: 10px;
    margin-bottom: 2px;
    color: #959595;
    // color: #e2e2e261;
  }

  .dig-line {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;

    .dig-line-item {
      color: #000;
      // width: 46%;
      margin-right: 2%;
      align-items: center;
      height: 50px;
      display: flex;
    }
  }

  .dig-view {
    border: 1px dashed #e2e2e261;
    box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.16);
    padding: 5px;
    min-height: 100px;
    margin-top: 10px;
    position: relative;

    .dig-view-title {
      color: #237FC3;
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-weight: 600;
      font-size: 20px;
      display: flex;
    }

    .dig-view-main {
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;

      .dig-view-main-item {
        color: #000;
        width: 280px;
        height: 60px;
        display: flex;
        align-items: center;
        white-space: nowrap;
        justify-content: space-between;
        margin-right: 10px;
        overflow: auto;

        .el-select ::v-deep .el-input__inner {
          color: #000 !important;
        }
      }
    }

    .dig-view-item-name {
      display: flex;
      align-items: center;
      width: 100%;
      margin-top: 5px;
      height: 30px;
      line-height: 30px;

      // padding: 5px 10px;
      .dig-view-item-name-line2 {
        width: 50px;
        height: 20px;
        margin-left: 5px;
        color: #fff;
        border-radius: 20px;
        text-align: center;
        line-height: 20px;
      }

      .dig-view-item-name-line3 {
        width: 150px;
        height: 20px;
        margin-left: 10px;
        color: #fff;
        line-height: 20px;

        ::v-deep.el-input__inner {
          width: 120px;
          height: 30px;
          line-height: 20px;
          display: flex;
          align-items: center;
        }

        ::v-deep.el-input--medium .el-input__icon {
          line-height: 13px;
        }
      }
    }
  }

  .dig-views {
    border: 1px dashed #e2e2e261;
    padding: 5px;
    min-height: 100px;
    margin-top: 10px;
    // display: flex;
    // flex-wrap: wrap;
    border: 1px solid #d3d9e2;

    .dig-view-title {
      color: #237FC3;
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-weight: 600;
      font-size: 20px;
      display: flex;
    }

    >div {
      width: calc(100% - 10px);
      background: #ffffff;
    }

    .dig-view-main {
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;

      .dig-view-main-item {
        color: #000;
        width: 280px;
        height: 60px;
        display: flex;
        align-items: center;
        white-space: nowrap;
        justify-content: space-between;
        margin-right: 10px;
        overflow: auto;

        .el-select ::v-deep .el-input__inner {
          color: #000 !important;
        }
      }
    }

    .dig-view-item-name {
      display: flex;
      align-items: center;
      width: 100%;
      margin-top: 5px;
      height: 30px;
      line-height: 30px;

      .dig-view-item-name-line2 {
        width: 50px;
        height: 20px;
        margin-left: 5px;
        color: #fff;
        border-radius: 20px;
        text-align: center;
        line-height: 20px;
      }

      .dig-view-item-name-line3 {
        width: 150px;
        height: 20px;
        margin-left: 10px;
        color: #fff;
        line-height: 20px;

        ::v-deep.el-input__inner {
          width: 120px;
          height: 30px;
          line-height: 20px;
          display: flex;
          align-items: center;
        }

        ::v-deep.el-input--medium .el-input__icon {
          line-height: 13px;
        }
      }
    }
  }

  .celuconfigshowview {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #000;

    >div:first-child {
      color: #237FC3;
      height: 40px;
      line-height: 40px;
      font-weight: 600;
      font-size: 20px;
    }

    .showviewbut {
      width: 100px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      padding: 0;
    }
  }
}

::v-deep .yanzheng {
  .el-dialog {
    // min-width: 20% !important;
    // height: 30vh !important;
    margin-top: 20vh !important;
    position: relative;
  }
}

::v-deep .el-dialog {
  .el-dialog__header .el-dialog__title {
    color: #fff;
  }

  .el-dialog__header {
    background: #237FC3 !important;
  }

  background-color: #d6ecff;
  box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.16);

  .el-form {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;

    .el-form-item {
      display: flex;

      .el-form-item__label {
        min-width: 120px;
        text-align: end;
      }

      .el-input__inner {
        border: none;
        color: #000 !important;
      }
    }
  }
}

.celu-but {
  // width: 100px;
  margin-top: 10px;
  padding: 0 15px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  font-size: 18px;
  border-radius: 5px;
  color: #fff;
  font-weight: 700;
  text-align: center;
  letter-spacing: 2px;
  cursor: pointer;
  // background: linear-gradient(180deg, #0098b7 0%, #76f5d2 100%);
  background: #2a94fc;
  border-radius: 29px;
  // background-image: linear-gradient(to bottom, #43e5f7, #24bbca, #0f9fab);
}

.celu-but:hover {
  color: #838c8d;
}

// ::v-deep .el-select .el-input__inner {
/*color: #dbe9e9 !important;*/
// }
.main {
  width: 100%;
  height: 100%;
}

.farm-main {
  width: 100%;
  // height: calc(100% - 110px);
  height: 100%;
  display: flex;
  flex-direction: row;
  // justify-content: flex-start;
  justify-content: space-around;
  align-items: center;

  .tr-sid {
    width: calc(15% - 15px);
    margin-left: 10px;
    margin-right: 5px;
    height: 100%;
    padding: 0 10px 10px;
    box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.16);
    background-color: #fff;

    .sid-head {
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      font-weight: 600;
      color: #00365d;
      letter-spacing: 1px;
      text-align: center;
      border-bottom: #fff dashed 1px;
    }

    .sid-tree {
      width: 100%;
      height: calc(100% - 40px);
    }
  }

  .cameraview-box {
    width: calc(64% - 10px);
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;

    .cameraview-box-one {
      border: 8px double #fff;
      background-color: #363839;
      width: 74%;
      height: calc(100% - 51%);
    }

    .allcameramain {
      height: 49%;
      width: 25%;
    }

    .cameraview-box-two-line {
      width: 100%;
      height: 30px;
      line-height: 30px;
      position: relative;
      top: 12px;
      font-size: 20px;
      text-align: center;
      display: flex;
      justify-content: center;

      .cameraview-box-two-line-title {
        position: absolute;
        top: -6px;
        width: 180px;
        height: 48px;
        color: #1d4c6f;
        line-height: 48px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        background-image: url("~@/assets/commont/top-hexagon.png");
      }
    }

    .cameraview-box-two {
      width: 100%;
      height: 100%;
      background-color: #fff;
      box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.16);
      border-radius: 8px 8px 0px 0px;
      padding: 35px 15px 15px 15px;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      overflow: auto;

      .zh-contro {
        height: 110px;
        width: calc(25% - 10px);
        min-width: 200px;
        border-radius: 5px;
        // border: 1px solid #1093b6;
        box-shadow: 0px 0px 3px 3px rgba(42, 148, 252, 0.16);
        margin: 5px 0;
        margin-right: 10px;
        padding: 5px 10px;
        background-color: #fff;
        display: flex;
        flex-wrap: wrap;

        .contro-one {
          width: 100%;
          height: 50px;
          display: flex;
          justify-content: space-between;
          padding: 10px;

          .icon {
            width: 40px;
            background-image: url("~@/assets/commont/nameIcon.png");
            background-size: 100% 20px;
            background-position: center center;
            background-repeat: no-repeat;
          }

          .contro-one-title {
            width: 100%;
            padding: 0 5px;
            line-height: 30px;
            color: #525252;
            font-size: 16px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          .contro-one-stau {
            line-height: 30px;
            font-size: 17px;
            min-width: 52px;
          }
        }

        .contro-two {
          width: 250px;
          display: flex;
          justify-content: space-around;

          .contro-two-zcon {
            box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.16);
            height: 30px;
            width: 80px;
            line-height: 28px;
            text-align: center;
            font-size: 16px;
            border: 1px solid #7fbefd;
            border-radius: 15px;
            cursor: pointer;
          }

          .contro-two-zcon:hover {
            // background: linear-gradient(180deg, #76f5d2 0%, #0098b7 100%);
            background: #2a94fc;
            color: #fff;
          }

          .contro-two-zcon-active {
            // background: linear-gradient(180deg, #76f5d2 0%, #0098b7 100%);
            background: #2a94fc;
            color: #fff;
          }

          .contro-two-zcon-select {
            background-color: #fff;
            color: #003947;
          }

          .contro-two-zcons {
            background-color: #fff;
            color: #003947;
          }
        }
      }
    }
  }

  .cameralist-box {
    width: calc(20% - 20px);
    height: 100%;
    text-align: center;
    position: relative;

    .cameraview-box-two-line {
      width: 100%;
      height: 30px;
      line-height: 30px;
      position: absolute;
      top: 0px;
      font-size: 20px;
      text-align: center;
      display: flex;
      justify-content: center;

      .cameraview-box-two-line-title {
        position: absolute;
        top: -6px;
        width: 180px;
        height: 48px;
        color: #1d4c6f;
        line-height: 48px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        background-image: url("~@/assets/commont/top-hexagon.png");
      }
    }

    .cameraview-box-two {
      width: 100%;
      height: calc(100% - 2.8%);
      background-color: #fff;
      box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.16);
      border-radius: 8px 8px 0px 0px;
      padding: 10px;
      padding-top: 20px;
      margin-top: 18px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      // overflow: auto;
      .zh-contro {
        width: 250px;
        height: 90px;
        border: #fff 1px solid;
        border-radius: 5px;
        margin: 5px 0;

        .contro-one {
          display: flex;
          justify-content: space-between;
          padding: 10px;

          .contro-one-title {
            font-size: 16px;
          }

          .contro-one-stau {
            font-size: 17px;
            min-width: 52px;
          }
        }

        .contro-two {
          width: 250px;
          display: flex;
          justify-content: space-around;

          .contro-two-zcon {
            border: solid 1px #fff;
            height: 30px;
            width: 100px;
            line-height: 30px;
            text-align: center;
            font-size: 20px;
            border-radius: 5px;
            cursor: pointer;
          }

          .contro-two-zcons {
            background-color: #fff;
            color: #003947;
          }

          .contro-two-zcon:hover {
            background-color: #fff;
            color: #003947;
          }
        }
      }

      .cameraview-box-main {
        height: 90%;
        width: 100%;

        .dig-view {
          // border: 1px dashed #e2e2e261;
          width: 100%;
          height: 99%;
          border-radius: 8px;
          box-shadow: 0px 0px 3px 4px rgba(42, 148, 252, 0.16);
          overflow-y: auto;
          padding: 20px 5px 5px 5px;
          min-height: 100px;
          margin-top: 10px;

          &-item {
            border: 1px solid #99ccfe;
            width: 100%;
            opacity: 1;
            color: #5d5d5d;
            border-radius: 8px;
            padding: 35px 8px;
            position: relative;

            .dig-view-item-title {
              position: absolute;
              top: -24px;
              width: 70%;
              height: 28px;
              background-color: #fff;
              text-align: center;
              left: 15%;
              color: #66b2fc;
              font-weight: 500;
              padding: 1px 10px;
              border-radius: 18px;
              border: 1px solid #99ccfe;
              overflow: hidden;
            }

            >div {
              text-align: start;
              margin-top: 10px;
              opacity: 1;
              border-radius: 8px;
              padding: 0px 10px;
              box-sizing: border-box;
              line-height: 24px;
              letter-spacing: 1px;

              hr {
                height: 1px;
                border: none;
                border-top: 1px dashed #ffffff80;
              }
            }
          }

          .dig-view-item-name {
            display: flex;
            align-items: center;
            width: 100%;
            margin-top: 5px;
            height: 30px;
            line-height: 30px;
            position: relative;

            .dig-view-stu {
              position: absolute;
              right: 0;
              width: 50px;
              height: 20px;
              margin-right: 5px;
              color: #fff;
              border-radius: 20px;
              text-align: center;
              line-height: 20px;
            }

            .dig-view-item-name-line2 {
              width: 50px;
              height: 20px;
              margin-right: 5px;
              color: #fff;
              border-radius: 20px;
              text-align: center;
              line-height: 20px;
            }

            .dig-view-item-name-line3 {
              width: 150px;
              height: 20px;
              margin-left: 10px;
              color: #fff;
              line-height: 20px;

              ::v-deep.el-input__inner {
                width: 120px;
                height: 30px;
                line-height: 20px;
                display: flex;
                align-items: center;
              }

              ::v-deep.el-input--medium .el-input__icon {
                line-height: 13px;
              }
            }
          }
        }
      }

      .celuconfigshowview {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;

        .showviewbut {
          width: 100px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          padding: 0;
        }
      }
    }
  }

  .input-yem-sty {
    width: 200px;
    margin-left: 5%;
    margin-right: 2%;
  }
}

// 无数据 提示
.cameraview-box-two-ds {
  display: flex;
  justify-content: center !important;
  align-items: center;

  h2 {
    font-size: 27px;
    letter-spacing: 4px;
  }
}

// ::v-deep .el-dialog__wrapper{
//   .el-dialog{
//     min-width: 800px !important;
//   }
// }
// ::v-deep .iframe-btn-container{
//   display: block;
// }
</style>
